<template>
	<div>
		<div class="dialog">
			<div class="input-group">
				<label class="password-label">标题</label>
				<input class="inpok" id="biaoti" type="text" v-model="biaoti" placeholder="简短的标题" />
			</div>
			<div>
				<div class="underline-div"></div>
			</div>
			<div class="input-group">
				<label class="password-label">取消设置</label>
				<!-- <input class="inpok" @click="djhqnr" type="text" style="text-align: right;" value="随时可取消 >" disabled /> -->
				<div class="kaoyb">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">{{ array[index] }} <text class="kuoyi">></text></view>
					</picker>
				</div>
			</div>
		</div>

		<div class="yuie">
			<div class="input-group">
				<label class="password-label">预约时段排期设置</label>
				<!-- <input class="inpok" @click="djjqhq" type="text" style="text-align: right; width: 150px; color: red;"
					value="3天可约 >" disabled /> -->
				<view style="text-align: right; color: red;" @click="djjqhq">{{ fate }} <text class="kuoyi">></text></view>
			</div>
		</div>
		<div class="login">
			<div class="input-group">
				<label class="password-label">家政员登陆手机:</label>
				<input class="inpok" type="text" v-model="phone" placeholder="请填写登陆手机号码" />
			</div>
			<div class="underline-div"></div>
			<div class="input-group">
				<label class="password-label">家政员登陆密码:</label>
				<input class="inpok" type="text" v-model="password" placeholder="请填写登陆密码" />
			</div>
		</div>
		<div class="daduo">
			<div class="input-group">
				<label class="password-label">服务价格:</label>
				<input class="inpok"  type="number" id="fuwujiag" v-model="fuwujiag" placeholder="请填写服务价格" />
			</div>
			<div class="underline-div"></div>
			<div class="input-group">
				<label class="password-label">学历</label>
				<!-- <input class="inpok" @click="djhqnr" type="text" style="text-align: right; width: 250px;" value="初中 >"
					disabled /> -->
				<div class="kaoyb">
					<picker @change="bindPickerChange1" :value="index1" :range="array1">
						<view class="uni-input">{{ array1[index1] }} <text class="kuoyi">></text></view>
					</picker>
				</div>
			</div>
			<div class="underline-div"></div>
			<div class="input-group">
				<label class="password-label">等级</label>
				<!-- <input class="inpok" @click="djhqnr" type="text" style="text-align: right; width: 250px;" value="金牌 >"
					disabled /> -->
				<div class="kaoyb">
					<picker @change="bindPickerChange2" :value="index2" :range="array2">
						<view class="uni-input">{{ array2[index2] }} <text class="kuoyi">></text></view>
					</picker>
				</div>
			</div>
			<div class="underline-div"></div>
			<div class="input-group">
				<label class="password-label">星级</label>
				<!-- <input class="inpok" @click="djhqnr" type="text" style="text-align: right; width: 250px;" value="4星 >"
					disabled /> -->
				<div class="kaoyb">
					<picker @change="bindPickerChange3" :value="index3" :range="array3">
						<view class="uni-input">{{ array3[index3] }} <text class="kuoyi">></text></view>
					</picker>
				</div>
			</div>
			<div class="underline-div"></div>
			<div class="input-group">
				<label class="password-label">证书</label>
				<input class="inpok" type="text" style="text-align: right; width: 250px;" value="至少选择2项" disabled />
			</div>
			<div class="underline-div"></div>
			<uv-checkbox-group v-model="checkboxValue">
				<uv-checkbox :customStyle="{marginRight: '12px', marginBottom: '8px'}"
					v-for="(item, index) in checkboxList" :key="index" :label="item.name" :name="item.name"
					activeColor="green"></uv-checkbox>
			</uv-checkbox-group>
			<div class="underline-div"></div>
			<div class="input-group">
				<label class="password-label">属相:</label>
				<input class="inpok" type="text" id="shuxiang" v-model="shuxiang" placeholder="请填写属相" />
			</div>
			<div class="underline-div"></div>
			<div class="input-group">
				<label class="password-label">民族:</label>
				<input class="inpok" type="text" id="minzu" v-model="minzu" placeholder="请填写民族" />
			</div>
			<div class="underline-div"></div>
			<div class="input-group">
				<label class="password-label">年龄(岁):</label>
				<input class="inpok" type="text" id="nianl" v-model="nianl" placeholder="请填写年龄(岁)" />
			</div>
			<div class="underline-div"></div>
			<div class="input-group">
				<label class="password-label">经验(年):</label>
				<input class="inpok" type="text" id="jinyan" v-model="jinyan" placeholder="请填写经验(年)" />
			</div>
			<div class="underline-div"></div>
			<div class="input-group">
				<label class="password-label">籍贯:</label>
				<input class="inpok" type="text" id="jiguan" v-model="jiguan" placeholder="请填写籍贯" />
			</div>
			<div class="underline-div"></div>
			<div class="input-group">
				<label class="password-label">特点标签</label>
			</div>
			<div class="underline-div"></div>
			<div class="input-group">
				<textarea class="inpok" type="text" id="tedian" v-model="tedian" style="height: 50px;"
					placeholder="请填写特点标签" />
			</div>
			<div class="underline-div"></div>
			<div class="tuppp" style="gap: 2px; margin-top: -15px;">
				<img src="/static/biq.png" style="height: 18px; width: 18px;" />
				<div style="color: #8d8d8d;">多个标签请用逗号分隔</div>
			</div>
			<div class="input-group" style="margin-top: 15px;">
				<label class="password-label">封面图片上传(必填)</label>
				<div style="color: #8d8d8d; font-size: 14px; margin-right: 40px;">(每张不超过10M)</div>
			</div>
			<div class="underline-div"></div>
			<div>
				<uni-file-picker v-model="imageValue" file-mediatype="image" mode="grid" :limit="1" @progress="progress"
					@success="success" @fail="fail" @select="select" />
			</div>
			<div class="underline-div"></div>
			<div class="input-group">
				<label class="password-label">介绍图集上传(必填)</label>
				<div style="color: #8d8d8d; font-size: 14px; margin-right: 40px;">(每张不超过10M)</div>
			</div>
			<div class="underline-div"></div>
			<div>
				<view class="example-body">
					<uni-file-picker v-model="imageValue1" file-mediatype="image" mode="grid" limit="8"
						@progress="progress" @success="success" @fail="fail" @select="select1"
						title="最多选择8张图片"></uni-file-picker>
				</view>
			</div>
			<div class="input-group" style="margin-top: 30px;">
				<label class="password-label">详细介绍</label>
				<div style="margin-left: 155px;">{{ wordCount }}/5000</div>
			</div>
			<div class="underline-div"></div>
			<div class="input-group">
				<textarea class="inpok" maxlength="5000" type="text" style="height: 150px; width: 300px;"
					placeholder="请填写详细介绍" id="xiangxi" v-model="text" />
			</div>
		</div>
		<div>
			<button class="baocuen" @click="baochui">创建</button>
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog cancelText="取消" confirmText="确定" title="温馨提示" :content="nrtsk"
					@confirm="dialogConfirm"></uni-popup-dialog>
			</uni-popup>
		</div>
		<div style="height: 50px;"></div>
	</div>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue';
	import {
		gonavigateTo
	} from '@/request/wx.js';

	const imageValue = ref([]);
	const imageValue1 = ref([]);
	// const checkbox1 = ref([]);
	const nrtsk = ref('');
	const alertDialog = ref(null);

	const biaoti = ref('');
	const fuwujiag = ref('');
	const shuxiang = ref('');
	const minzu = ref('');
	const nianl = ref('');
	const jinyan = ref('');
	const jiguan = ref('');
	const tedian = ref('');
	const phone = ref('');
	const password= ref('');
	const checkboxValue = ref(['执业证书', '身份证']);
	const checkboxList = ref([{
			name: '背调合格',
			disabled: false
		},
		{
			name: '保证金已缴纳',
			disabled: false
		},
		{
			name: '身份证',
			disabled: false
		},
		{
			name: '健康证',
			disabled: false
		},
		{
			name: '体检报告',
			disabled: false
		},
		{
			name: '执业证书',
			disabled: false
		}
	]);
	const fate =ref('');
	onMounted(() => {
	 // 从 localStorage 获取 notices 数据
	  var item = uni.getStorageSync('adminAddHomemaking');
	if(item==""){
		fate.value="请配置可预约时段"
	}else{
		fate.value= item.length+"天可预约"
	}
	});
	const select = (e) => {
		console.log('选择文件：', e);
		// imageValue.value = e.tempFilePaths[0];这个是网络地址要连接后端
		imageValue.value = e.tempFiles[0]; //这个是本地地址用于测试
		console.log('imageValue:', imageValue.value);
	};

	const select1 = (e) => {
		console.log('选择文件：', e);
		// imageValue1.value = e.tempFilePaths[0];这个是网络地址要连接后端
		imageValue1.value = e.tempFiles[0]; //这个是本地地址用于测试
		console.log('imageValue:', imageValue1.value);
	};

	const progress = (e) => {
		console.log('上传进度：', e);
	};

	const success = (e) => {
		console.log('上传成功');
	};

	const fail = (e) => {
		console.log('上传失败：', e);
	};

	const djhqnr = () => {
		console.log("获取");
	};

	const djjqhq = () => {
		console.log("获取日期排期");
		gonavigateTo(`/pages/admin/homemaking/add/time/time`);
	};

	const text = ref('');

	// 创建一个计算属性来计算字数
	const wordCount = computed(() => text.value.length);

	const array = ref(['不可取消', '随时可取消', '仅开始前可取消']);
	const index = ref(1);

	const array1 = ref(['小学', '初中', '高中', '大学', '其他']);
	const index1 = ref(1);

	const array2 = ref(['金牌', '银牌', '普通']);
	const index2 = ref(0);

	const array3 = ref(['1星', '2星', '3星', '4星', '5星', '6星']);
	const index3 = ref(3);

	// 事件处理函数
	const bindPickerChange = (e) => {
		console.log('picker发送选择改变，携带值为', e.detail.value);
		index.value = e.detail.value;
	};

	const bindPickerChange1 = (e) => {
		console.log('picker1发送选择改变，携带值为', e.detail.value);
		index1.value = e.detail.value;
	};

	const bindPickerChange2 = (e) => {
		console.log('picker2发送选择改变，携带值为', e.detail.value);
		index2.value = e.detail.value;
	};

	const bindPickerChange3 = (e) => {
		console.log('picker3发送选择改变，携带值为', e.detail.value);
		index3.value = e.detail.value;
	};

	const baochui = () => {
		if (biaoti.value === '') {
			nrtsk.value = "[标题] 不能为空";
			alertDialog.value.open();
			return;
		}

		if (fuwujiag.value === '') {
			nrtsk.value = "请填写 [服务价格]";
			alertDialog.value.open();
			return;
		}
		if (phone.value=== ''){
			nrtsk.value = "请填写 [手机号]";
			alertDialog.value.open();
			return;
		}
		if (password.value=== ''){
			nrtsk.value = "请填写 [密码]";
			alertDialog.value.open();
			return;
		}
		if (checkboxValue.value.length === 0) {
			nrtsk.value = "请选择 [证书]";
			alertDialog.value.open();
			return;
		}

		if (checkboxValue.value.length < 2) {
			nrtsk.value = "[证书] 至少选择2项";
			alertDialog.value.open();
			return;
		}

		if (shuxiang.value === '') {
			nrtsk.value = "请填写 [属相]";
			alertDialog.value.open();
			return;
		}

		if (minzu.value === '') {
			nrtsk.value = "请填写 [民族]";
			alertDialog.value.open();
			return;
		}

		if (nianl.value === '') {
			nrtsk.value = "请填写 [年龄(岁)]";
			alertDialog.value.open();
			return;
		}

		if (jinyan.value === '') {
			nrtsk.value = "请填写 [经验(年)]";
			alertDialog.value.open();
			return;
		}

		if (jiguan.value === '') {
			nrtsk.value = "请填写 [籍贯]";
			alertDialog.value.open();
			return;
		}

		if (tedian.value === '') {
			nrtsk.value = "请填写 [特点标签]";
			alertDialog.value.open();
			return;
		}

		if (imageValue.value.length === 0) {
			nrtsk.value = "请上传 [封面图片]";
			alertDialog.value.open();
			return;
		}

		if (imageValue1.value.length === 0) {
			nrtsk.value = "请上传 [介绍图集]";
			alertDialog.value.open();
			return;
		}

		if (text.value === '') {
			nrtsk.value = "请填写 [详细介绍]";
			alertDialog.value.open();
			return;
		}
		
		console.log("标题"+biaoti.value)
		console.log("取消设置"+array.value[index.value])
		console.log("手机号码"+phone.value)
		console.log("密码"+password.value)
		console.log("服务价格"+fuwujiag.value)
		console.log("学历"+array1.value[index1.value])
		console.log("等级"+array2.value[index2.value])
		console.log("星级"+array3.value[index3.value])
		console.log("证书"+checkboxValue.value)
		console.log("属相"+shuxiang.value)
		console.log("民族"+minzu.value)
		console.log("年龄"+nianl.value)
		console.log("经验"+jinyan.value)
		console.log("籍贯"+jiguan.value)
		console.log("特点标签"+tedian.value)
		console.log("封面图片"+imageValue.value)
		console.log("介绍图集"+imageValue1.value)
		console.log("详细介绍"+text.value)

	};

	const dialogConfirm = () => {
		console.log('点击确认');
	};
</script>

<style scoped>
	page{
		background-color: #f3f3f3;
	}
	.dialog,
	.yuie,
	.daduo,
	.login {
		border: 1px solid #ccc;
		border-radius: 4px;
		padding: 20px;
		/* width: 82%; */
		background-color: white;
		z-index: 1000;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		/* margin-left: 12px; */
		margin-top: 30upx;
	}

	.yuie {
		background-color: #fffe7f;
	}

	.password-label::before {
		content: '*';
		color: red;
		/* 设置星号的颜色 */
		font-weight: bold;
		vertical-align: middle;
		/* 确保星号与文本垂直居中对齐 */
		font-size: 1em;
		/* 确保星号的大小与文本一致 */
	}

	/* 确保 label 的行高不会影响伪元素的对齐 */
	.password-label {
		line-height: 1;
		/* 设置行高为1，减少行高的影响 */
		display: inline-block;
		/* 使 label 可以包含伪元素 */
		font-weight: bold;
		margin-right: 8px;
	}

	.inpok:focus {
		border: none;
		outline: none;
	}

	.input-group {
		display: table;
		/* 使用table布局 */
		width: 100%;
		/* 使容器宽度为100% */
		table-layout: auto;
		/* 表格布局自动调整 */
		margin-left: auto;
		/* 将容器居中对齐 */
		margin-right: auto;
		/* 将容器居中对齐 */
	}

	.input-group .password-label,
	.input-group .kaoyb {
		display: table-cell;
		/* 使子元素以表格单元格的形式显示 */
		vertical-align: middle;
		/* 垂直居中对齐 */
	}

	.input-group .kaoyb {
		width: 220px;
		/* 设置picker的宽度 */
	}

	.underline-div {
		border-bottom: 1px solid #9e9e9e;
		/* 1px黑色虚线作为下划线 */
		width: 100%;
		/* 设置下划线的长度为容器宽度的50% */
		height: 0;
		/* 由于设置了下划线，需要将div的高度设置为0 */
		margin: 20px auto;
		/* 居中显示下划线 */
	}

	.example-body {
		padding: 10px;
		padding-top: 0;
	}

	.baocuen {
		width: 85%;
		border: none;
		background-color: #149fad;
		color: white;
		border-radius: 4px;
		cursor: pointer;
		font-size: 16px;
		margin-top: 35px;
		clip-path: inset(0 round 55upx 55upx 55upx 55upx);
	}

	.kuoyi {
		color: #8d8d8d;
		font-size: 20px;
	}

	.kaoyb {
		text-align: right;
	}

	.tuppp {
		display: flex;
		/* 使用Flexbox布局 */
		align-items: center;
		/* 垂直居中对齐 */
		gap: 2px;
		/* 设置子元素之间的间距 */
		margin-top: -15px;
		/* 容器的上边距 */
	}
</style>